<template>
  <z-container>
    <z-header height="28px">模糊搜索</z-header>
    <z-main>
      <z-row :gutter="12">
        <z-col :span="3">普通搜索</z-col>
        <z-col :span="15">
          <z-fuzzy-input
            clearable
            @handle-select="handleSelect"
            @handle-change="handleChange"
            :fetch-fuzzy="fetchFuzzy"
             placeholder="placeholder值"
            main-props="name"
          >
            <template slot-scope="{ item }">
              <div class="main">名称：{{ item.name }}</div>
              <div class="side">编号：{{ item.code }}</div>
            </template>
          </z-fuzzy-input>
        </z-col>
      </z-row>
      <z-row :gutter="12">
        <z-col :span="3">default-validate</z-col>
        <z-col :span="15">
          <z-form :model="formData" ref="formData" label-width="100px">
            <z-form-item label="名称" prop="name" :rules="[ { required: true, trigger: ['blur', 'change'] } ] ">
              <z-fuzzy-input
                clearable
                :allow-change="false"
                @handle-select="handleSelect"
                :fetch-fuzzy="fetchFuzzy"
                main-props="name"
              >
                <template slot-scope="{ item }">
                  <div class="main">名称：{{ item.name }}</div>
                  <div class="side">编号：{{ item.code }}</div>
                </template>
              </z-fuzzy-input>
            </z-form-item>
          </z-form>
        </z-col>
      </z-row>
     <z-row :gutter="12">
        <z-col :span="3">分页</z-col>
        <z-col :span="15">
          <z-fuzzy-input
            clearable
            @handle-select="handleSelect"
            @handle-change="handleChange"
            :fetch-fuzzy="fetchFuzzyPagination"
            main-props="name"
            type="pagination"
            :page="page"
            :page-size="pageSize"
            :total="total"
          >
            <template slot-scope="{ item }">
              <div class="main">名称：{{ item.name }}</div>
              <div class="side">编号：{{ item.code }}</div>
            </template>
          </z-fuzzy-input>
        </z-col>
      </z-row>
      <z-row :gutter="12">
        <z-col :span="3">下拉加载搜索</z-col>
        <z-col :span="15">
           <z-fuzzy-input
              clearable
              @handle-select="handleSelect"
              :fetch-fuzzy="fetchFuzzy"
              :allow-change="false"
              main-props="name"
              type="pull"
              :page="page"
              :page-size="pageSize"
              :total="total"
            >
              <template slot-scope="{ item }">
                <div class="main">名称：{{ item.name }}</div>
                <div class="side">编号：{{ item.code }}</div>
              </template>
            </z-fuzzy-input>
        </z-col>
      </z-row>
  </z-main>
  </z-container>
  
  
</template>
<script>
export default{
  name:'cFuzzyInput',
  data(){
    return {
      formData: {
        name: ''
      },
      page: 1,
      pageSize: 10,
      total: 100,
      id: 1
    }
  },
  methods: {
    fetchFuzzy(params) {
      return new Promise((resolve, reject) => {
        //params.queryString模糊的内容
        //调用接口查询,成功传入列表
        // setTimeout(() => {
          var arr = []
          for (var i = 0; i < 10; i++) {
            arr.push({ name: '测试' + this.id, code: this.id })
            this.id++
          }
          resolve(arr)
        // }, 500)
      })
    },
    handleSelect(item, serviceType, parent){
      this.formData.name=item.name
    },
    handleChange(queryString, serviceType, parent){
      this.formData.name=queryString
    },
    fetchFuzzyPagination(params){
      return new Promise((resolve, reject) => {
          //params.queryString模糊的内容,params.page查询的页码,params.pageSize每页的条数
          this.page = params.page ? params.page : 1

          //根据条件调用接口查询,成功传入列表
          setTimeout(() => {
            var arr = []
            for (var i = 0; i < 10; i++) {
              arr.push({ name: '测试' + this.id, code: this.id })
              this.id++
            }
            resolve(arr)
          }, 500)
        })
    }
  },
}
</script>